<template>
  <view class="container">
    <view class="header">
		<u-icon name="arrow-leftward" size="20" @click="goBack"></u-icon>
		<text class="title"> {{title}} </text>
		<!-- <u-icon name="checkmark" size="20"></u-icon> -->
    </view>
	
	<u-list>
		<u-list-item v-for="item in list" :key="item.id" class="list-item">
			<view style="display:flex;">
				<view class="color-block" v-if="type.id=='colors'" :style="{backgroundColor: item.rgb}" style="margin: 10px;"> </view>
				<u--text :text="item.name"></u--text>
			</view>
			<view style="display:flex;">
				<u-icon name="edit-pen" size="20" @click="editItem(item)"></u-icon>
				<u-icon name="trash" size="20" @click="deleteItem(item)"></u-icon>
				<u-icon v-if="type.child" name="arrow-right" size="20" @click="selectChildren(item)"></u-icon>
			</view>
		</u-list-item>
	</u-list>
	
	<u-button type="primary" class="add-button" shape="circle"
		icon="plus" @click="addNewItem">
	</u-button>
	
	<uv-modal ref="modal" @confirm="confirm">
		<view style="display: flex;">
			<view class="color-block" v-if="type.id=='colors'" 
				:style="{backgroundColor: editColor}"
				@click="onColorClick">
			</view>
			<u--input
				placeholder="请输入名称"
				border="surround"
				v-model="editName"
			  ></u--input>
		</view>
	</uv-modal>
	<uv-pick-color ref="pickerColor" :color="color" @confirm="onColorSelect" style="z-index:99999"></uv-pick-color>
  </view>
</template>

<script>
import clothes from '@/api/clothes.js'

export default {
  data() {
    return {
		title: "管理分类",
		type: {},
		list: [],
		showDialog: false,
		
		editId: -1,		//当前编辑的ID
		editName: "",	//当前编辑的名称
		
		editColor: "",
		color: { r: 0, g: 0, b: 255, a: 1 },
    }
  },
  onLoad: function (data) {
      // console.log(data,111);
	  this.type = JSON.parse(decodeURIComponent(data.params));
	//   console.log(this.type,111);
	  this.title = "管理" + this.type.name;
	  this.updateData();
  },
  methods: {
    goBack() {
      // 返回逻辑
	  uni.navigateBack({
	      delta: 1
	  });
    },
	updateData() {
		let that = this;
		clothes.common.get_objects(this.type.id).then(res=>{
			// console.log(res);
			let list = [];
			if (that.type.parent_id) {
				res.forEach(item=>{
					if (item.parent == that.type.parent_id) {
						list.push(item);
					}
				});
			}
			else {
				list = res;
			}
			that.list = list;
		});
	},
	addNewItem() {
		if(this.editId != -1) {
			this.editName = "";
			this.editId = -1;
		}
		this.$refs.modal.open();
	},
	editItem(item) {
		this.editId = item.id;
		this.editName = item.name;
		this.editColor = item.rgb;
		this.$refs.modal.open();
	},
	hexToColor(hex) {
	  hex = hex.replace(/^#/, '');
	  if (hex.length === 3) {
		hex = hex.split('').map(char => char + char).join('');
	  }
	  const bigint = parseInt(hex, 16);
	  const r = (bigint >> 16) & 255;
	  const g = (bigint >> 8) & 255;
	  const b = bigint & 255;
	  return { r:r, g:g, b:b, a: 1 };
	},
	colorToHex(color) {
	  const { r, g, b } = color;
	  const hex = ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1).toUpperCase();
	  return `#${hex}`;
	},
	onColorClick() {
		this.color = this.hexToColor(this.editColor);
		this.$refs.pickerColor.open(this.color);
	},
	onColorSelect(color) {
		this.editColor = color.hex;
	},
	confirm() {
		this.showDialog = false;
		let data = {
			"name": this.editName,
		};
		if (this.type.id=="colors") {
			data.rgb = this.editColor
		}
		if (this.type.parent_id) {
			data.parent = this.type.parent_id
		}
		if(this.editId == -1) {
			clothes.common.create_object(this.type.id, data).then(res=>{
				this.updateData();
			}).catch(res=>{
				this.updateData();
			});
		} else {
			clothes.common.update_object(this.type.id, this.editId, data).then(res=>{
				this.updateData();
			}).catch(res=>{
				this.updateData();
			});
		}
	},
	deleteItem(item) {
		uni.showModal({
			title: '提示',
			content: '确定要删除该选项吗？',
			success: (res) => {
				if (res.confirm) {
					clothes.common.delete_object(this.type.id, item.id)
					.then(res=>{})
					.catch(res=>{
						uni.showToast({
							title: '删除成功',
							icon:'success'
						});
						this.updateData();
					})
				}
			}
		});
	},
	selectChildren(item) {
		if (this.type.child) {
			this.type.child.parent_id = item.id
			let params = encodeURIComponent(JSON.stringify(this.type.child))
			uni.navigateTo({
				url:`./optionList?params=${params}`
			});
		}
	},
  }
}
</script>

<style scoped>
.container {
  padding: 0px 0px;
}

.header {
	display: flex;
	/* justify-content: center; */
	align-items: center;
	padding: 10px;
	background-color: #f8f8f8;
	width: 100%;
}

.title {
	font-size: 18px;
	font-weight: bold;
	margin-left: 10px;
}

.color-block {
  width: 50rpx;
  height: 50rpx;
  margin-right: 10rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.add-button {
	width: 60rpx;
	height: 60rpx;
	background-color: #007AFF;
	color: white;
	border-radius: 50%;
	position: fixed;
	bottom: 30rpx;
	right: 30rpx;
	z-index: 999;
}

.list-item {
	display:flex;
	flex-direction: row;
	height:50px;
	justify-content: space-between; 
	margin: 0 20px;
}
</style>
